<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改参数')" />
	<th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-config-edit" th:object="${dataSource}">
            <input id="id" name="id" th:field="*{id}"  type="hidden">
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">数据库类型：</label>
                <div class="col-sm-8">
                    <select name="dbType" class="form-control" th:with="type=${@dict.getType('sys_db_type')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{dbType}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">	
                <label class="col-sm-3 control-label is-required">数据库名称：</label>
                <div class="col-sm-8">
                    <input id="name" name="name" th:field="*{name}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group pgsql" th:style="'display:' + ${dataSource.dbType == 'pgsql' ? 'block' : 'none'}"> 
                <label class="col-sm-3 control-label is-required">模式：</label>
                <div class="col-sm-8">
                    <input id="schemaName" name="schemaName" th:field="*{schemaName}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group oracle" th:style="'display:' + ${dataSource.dbType == 'oracle' ? 'block' : 'none'}">	
                <label class="col-sm-3 control-label is-required">连接方式：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('sys_oracle_mode')}">
						<input type="radio" th:id="${dict.dictCode}" name="oracleConnMode" th:value="${dict.dictValue}" th:checked="${dataSource.oracleConnMode == dict.dictValue || dict.default}" >
						<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
					</div>
                </div>
            </div>
            <div class="form-group oracle" th:style="'display:' + ${dataSource.dbType == 'oracle' ? 'block' : 'none'}">	
                <label class="col-sm-3 control-label is-required">服务名或者SID：</label>
                <div class="col-sm-8">
                    <input id="serviceNameOrSid" name="serviceNameOrSid" th:field="*{serviceNameOrSid}" class="form-control" type="text" required>
                </div>
            </div>
			<div class="form-group">	
                <label class="col-sm-3 control-label is-required">主机地址：</label>
                <div class="col-sm-8">
                    <input id="host" name="host" th:field="*{host}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">	
                <label class="col-sm-3 control-label is-required">主机端口：</label>
                <div class="col-sm-8">
                    <input id="port" name="port" th:field="*{port}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">	
                <label class="col-sm-3 control-label is-required">用户名：</label>
                <div class="col-sm-8">
                    <input id="username" name="username" th:field="*{username}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">	
                <label class="col-sm-3 control-label">密码：</label>
                <div class="col-sm-8">
                    <input id="password" name="password" th:field="*{password}" class="form-control" type="text">
                </div>
            </div>
    	</form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <script type="text/javascript">
	    var prefix = ctx + "system/dataSource";
	    
	    $("#form-config-edit").validate({
	    	onkeyup: false,
	        focusCleanup: true
	    });
	    $('select[name="dbType"]').on("select2:select",function(){
			var data = $(this).val();
			if(data == 'oracle'){
				$('.oracle').show();
			} else {
				$('.oracle').hide();
			}
			if(data == 'pgsql'){
                $('.pgsql').show();
            } else {
            	$('.pgsql').hide();
            }
		});
	    
	    function submitHandler() {
	        if ($.validate.form()) {
	        	var url = prefix + "/connect";
	        	var data = $('#form-config-edit').serialize();
	        	//先测试连接是否可用
	        	var config = {
        	        url: url,
        	        type: "post",
        	        dataType: "json",
        	        data: data,
        	        beforeSend: function () {
        	        	$.modal.loading("正在测试连接中，请稍后...");
        	        },
        	        success: function(result) {
        	        	if (result.code == web_status.SUCCESS) {
        	        		$.operate.save(prefix + "/save", data);
        	        	} else {
        	        		$.modal.closeLoading();
        	        		$.modal.alertWarning(result.msg)
        	        	}
        	        }
        	    };
        	    $.ajax(config)
	        }
	    }
    </script>
</body>
</html>
